<template>
  <view class="dark msg-funs-container">
    <view
      class="fun-item-view"
      v-for="(item, index) in icons"
      :key="index"
      :class="{ 'animate-fade-in': index === 0 }"
    >
      <div
        class="fun-item-container"
        :style="{ backgroundColor: item.bgColor }"
      >
        <!-- 使用动态组件，确保is的值对应已注册的组件名 -->
        <!-- 在小程序中无法使用动态组件,改用条件渲染 -->
        <!-- <component :is="item.iconName" :size="30"></component> -->
        <!-- 使用条件渲染替代动态组件 -->
        <!-- <CommentIcon v-if="item.iconName === 'CommentIcon'" :size="30" /> -->
        <!-- <CommentRightIcon
          v-else-if="item.iconName === 'CommentRightIcon'"
          :size="30"
        /> -->
        <!-- <FollowIcon v-else-if="item.iconName === 'FollowIcon'" :size="30" /> -->
        <!-- <LikeIcon v-else-if="item.iconName === 'LikeIcon'" :size="30" /> -->
        <i
          class="iconfont icon-follow"
          v-if="item.iconName === 'FollowIcon'"
          :style="{ color: iconColor, fontSize: iconFontSize + 'px' }"
        ></i>
        <i
          class="iconfont icon-like"
          v-if="item.iconName === 'LikeIcon'"
          :style="{ color: iconColor, fontSize: iconFontSize + 'px' }"
        ></i>
        <i
          class="iconfont icon-comment"
          v-if="item.iconName === 'CommentIcon'"
          :style="{ color: iconColor, fontSize: iconFontSize + 'px' }"
        ></i>
        <i
          class="iconfont icon-interaction"
          v-if="item.iconName === 'CommentRightIcon'"
          :style="{ color: iconColor, fontSize: iconFontSize + 'px' }"
        ></i>
      </div>
      <span class="item-text">{{ item.text }}</span>
    </view>
  </view>
</template>

<script>
  // 导入组件

  export default {
    name: "MsgFun",
    // 关键：必须在components中注册组件，小程序端才会识别
    components: {},
    data() {
      return {
        icons: [
          {
            // 修复1：组件名拼写错误（原FollowIcons多了个s）
            iconName: "FollowIcon",
            text: "粉丝",
            bgColor: "#3384ffd4",
          },
          {
            iconName: "LikeIcon",
            text: "喜欢",
            bgColor: "#ff6585",
          },
          {
            iconName: "CommentIcon",
            text: "评论",
            bgColor: "#da5dff",
          },
          {
            iconName: "CommentRightIcon",
            text: "随拍互动",
            bgColor: "#009cff",
          },
        ],
        iconFontSize: 30,
        iconColor: "#fff",
      };
    },
  };
</script>
<style>
  /* 样式保持不变 */
  .msg-funs-container {
    background-color: #171827;
    border-bottom: 1px solid #808080d3;
    padding: 16px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .fun-item-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation-delay: 0.1s;
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }
  .fun-item-container {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-bottom: 8px;
    background-color: #3384ffd4;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .item-text {
    line-height: 16px;
    font-size: 14px;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>
